<template>
  <div class="sk">
    <Table :tableData="paneC.tableDataA" @blur="handleBlur" />
    <section>
      <span class="title">
        <i class="el-icon-star-on"></i>
        选择产品：
      </span>
      <br />
      <el-checkbox-group v-model="paneC.checkedOptionsB" :max="1">
        <el-checkbox
          v-for="(option, index) in paneC.optionsB"
          :label="option"
          :key="index"
        >
          {{ option }}
        </el-checkbox>
      </el-checkbox-group>
    </section>
    <Card
      v-if="paneC.checkedOptionsB.length"
      :title="paneC.checkedOptionsB[0]"
      style="margin-top: 10px"
    >
      <section>
        <span class="title" style="margin-top: 0">
          <i class="el-icon-star-on"></i>
          产品资费：
        </span>
        <br />
        <el-checkbox-group v-model="paneC.checkedOptionsA" :max="1">
          <el-checkbox
            v-for="(option, index) in paneC.optionsA"
            :label="option"
            :key="index"
          >
            {{ option }}
          </el-checkbox>
        </el-checkbox-group>
      </section>
      <section v-if="paneC.checkedOptionsB[0] === '集团固话'">
        <section>
          <span class="title">
            <i class="el-icon-star-on"></i>
            产品属性：
          </span>
          <br />
          <Table :tableData="paneC.tableDataB" @blur="handleBlurA" />
        </section>
      </section>
    </Card>

    <section>
      <span class="title">
        <i class="el-icon-star-on"></i>
        其他信息：
      </span>
      <br />
      <Table :tableData="paneC.tableDataD" />
    </section>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Table from '@/components/Table'
export default {
  components: {
    Card,
    Table
  },
  data() {
    return {
      paneC: {
        dialogVisible: false,
        innerVisibleA: false,
        innerVisibleB: false,
        checkedOptionsA: [],
        radio: 0,
        optionsA: ['会议包月费，每成员每月75元（包月）'],
        checkedOptionsC: [],
        optionsC: ['试期资费（试期资费：X元试用30天）'],
        checkedOptionsB: [],
        optionsB: ['集团固话', '多媒体会议', '高清会议', '语音通话'],
        tableDataA: {
          col: [
            {
              prop: 'colA',
              label: '客户名称',
              type: 'Input'
            },
            {
              prop: 'colB',
              label: '客户编码',
              type: 'Input'
            },
            {
              prop: 'colC',
              label: '客户所在地',
              type: 'Input'
            },
            {
              prop: 'colD',
              label: '是否VIP',
              type: 'Input'
            },
            {
              prop: 'colE',
              label: '合同信息'
            }
          ],
          row: [
            {
              colA: '',
              colB: '',
              colC: '',
              colD: '',
              colE: ''
            }
          ]
        },
        tableDataB: {
          col: [
            {
              prop: 'colA',
              label: '集团管理员姓名',
              width: '180px',
              type: 'Input'
            },
            {
              prop: 'colB',
              label: '集团管理员手机号码',
              width: '180px',
              type: 'Input'
            },
            {
              prop: 'colC',
              label: '集团管理员邮箱',
              width: '180px',
              type: 'Input'
            },
            {
              prop: 'colD',
              label: '集团管理员传真',
              width: '180px',
              type: 'Input'
            },
            {
              prop: 'colE',
              label: '最大成员数量',
              width: '180px',
              type: 'Input'
            },
            {
              prop: 'colF',
              label: '备注',
              width: '180px',
              type: 'Input'
            },
            {
              prop: 'colG',
              label: '附件',
              type: 'Button',
              btnList: [{ label: '上传' }]
            }
          ],
          row: [
            {
              colA: '',
              colB: '',
              colC: '',
              colD: '',
              colE: '',
              colF: '',
              colG: ''
            }
          ]
        },
        tableDataC: {
          col: [
            {
              prop: 'colA',
              label: '生效规则'
            },
            {
              prop: 'colB',
              label: '支付模式',
              type: 'Select'
            },
            {
              prop: 'colC',
              label: '签约主体',
              type: 'Input'
            },
            {
              prop: 'colD',
              label: '支付账户',
              type: 'Input'
            }
          ],
          row: [
            {
              colA: '当日生效',
              colB: [
                {
                  value: 1,
                  label: '微信'
                },
                {
                  value: 2,
                  label: '支付宝'
                }
              ],
              colC: '',
              colD: ''
            }
          ]
        },
        tableDataD: {
          col: [
            {
              prop: 'colA',
              label: '客户经理名称'
            },
            {
              prop: 'colB',
              label: '客户经理电话'
            }
          ],
          row: []
        }
      }
    }
  },
  methods: {
    handleBlur() {
      this.paneC.tableDataA.row = [
        {
          colA: '方石集团',
          colB: 'A3265412547',
          colC: '河北',
          colD: '是',
          colE: '方石集团.pdf'
        }
      ]
      this.paneC.tableDataD.row = [
        {
          colA: '李强',
          colB: '13563654102'
        }
      ]
    },
    handleBlurA() {
      this.paneC.tableDataB.row = [
        {
          colA: '周山',
          colB: '15236984526',
          colC: 'jk_kkl@163.com',
          colD: '',
          colE: '6',
          colF: '',
          colG: ''
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 16px;
  display: block;
  margin-top: 30px;
}
</style>
